<script lang="ts" setup>
import { ref, computed, inject } from 'vue';

const emit = defineEmits<{
  (e: 'import-data'): void;
  (e: 'export-data'): void;
  (e: 'update-website', website: Website, categoryId: string, subCategoryName?: string): void;
  (e: 'delete-website', websiteId: string): void;
  (e: 'add-website', website: Website, categoryId: string, subCategoryId?: string): void;
}>();

const triggerImport = () => {
  emit('import-data');
};

const triggerExport = () => {
  emit('export-data');
};

interface Website {
  id: string;
  title: string;
  url: string;
  icon: string;
  description?: string;
  tags?: string[]; // 添加标签属性
}

interface SubCategory {
  id: string;
  name: string;
  websites: Website[];
}

interface Category {
  id: string;
  name: string;
  websites: Website[];
  subCategories?: SubCategory[]; // 添加子分类属性
}

// 定义注入的navigationData类型
interface NavigationData {
  categories: Category[];
}

interface Props {
  category: Category;
}

const props = defineProps<Props>();

// 注入全局导航数据
const navigationData = inject<NavigationData>('navigationData');

// 计算属性：获取所有分类用于下拉选择
const availableCategories = computed(() => {
  if (!navigationData) return [];
  return navigationData.categories;
});

// 计算属性：根据选中的主分类获取子分类
const availableSubCategories = computed(() => {
  if (!addForm.value.categoryId || !navigationData) return [];
  const category = navigationData.categories.find(c => c.id === addForm.value.categoryId);
  return category?.subCategories || [];
});


// 搜索关键词
const searchQuery = ref<string>('');

// 搜索范围：'global' 全局搜索，'current' 当前分类搜索
const searchScope = ref<'global' | 'current'>('global');

// 当前选中的子分类，如果没有则为'all'
const activeSubCategory = ref<string>('all');

// 当前选中的标签，如果没有则为'all'
const activeTag = ref<string>('all');

// 右键菜单相关状态
const contextMenu = ref({
  visible: false,
  x: 0,
  y: 0,
  website: null as Website | null
});

// 编辑对话框相关状态
const editModal = ref({
  visible: false,
  website: null as Website | null
});

// 编辑表单数据
const editForm = ref({
  id: '',
  title: '',
  url: '',
  icon: '',
  description: '',
  tags: [] as string[],
  categoryId: '', // 添加分类ID字段
  subCategoryName: '' // 添加子分类名称字段
});

// 获取所有标签
const allTags = computed(() => {
  const tagsSet = new Set<string>();
  // 从主分类网站中提取标签
  props.category.websites.forEach(website => {
    if (website.tags) {
      website.tags.forEach(tag => tagsSet.add(tag));
    }
  });
  
  // 从子分类网站中提取标签
  if (props.category.subCategories) {
    props.category.subCategories.forEach(subCategory => {
      subCategory.websites.forEach(website => {
        if (website.tags) {
          website.tags.forEach(tag => tagsSet.add(tag));
        }
      });
    });
  }
  
  return Array.from(tagsSet);
});

// 获取全局所有网站（添加额外的分类信息）
const getAllWebsites = computed(() => {
  if (!navigationData) return [];
  
  const allWebsites: (Website & { categoryId?: string; categoryName?: string; subCategoryId?: string; subCategoryName?: string; })[] = [];
  
  navigationData.categories.forEach(category => {
    // 添加主分类网站
    category.websites.forEach(website => {
      allWebsites.push({ 
        ...website, 
        categoryId: category.id, 
        categoryName: category.name 
      });
    });
    
    // 添加子分类网站
    if (category.subCategories) {
      category.subCategories.forEach(subCategory => {
        subCategory.websites.forEach(website => {
          allWebsites.push({ 
            ...website, 
            categoryId: category.id, 
            categoryName: category.name,
            subCategoryId: subCategory.id,
            subCategoryName: subCategory.name
          });
        });
      });
    }
  });
  
  return allWebsites;
});

// 全局搜索结果
const globalSearchResults = computed(() => {
  // 注意：这里不再检查 searchScope.value !== 'global'，确保只要输入了搜索词就能看到结果
  if (!searchQuery.value || !navigationData) {
    return [];
  }
  
  const query = searchQuery.value.toLowerCase();
  return getAllWebsites.value.filter(website => {
    // 搜索网站标题
    if (website.title.toLowerCase().includes(query)) {
      return true;
    }
    
    // 搜索网站URL
    if (website.url.toLowerCase().includes(query)) {
      return true;
    }
    
    // 搜索网站描述
    if (website.description && website.description.toLowerCase().includes(query)) {
      return true;
    }
    
    // 搜索网站标签
    if (website.tags && website.tags.some(tag => tag.toLowerCase().includes(query))) {
      return true;
    }
    
    // 搜索分类名称
    if (website.categoryName && website.categoryName.toLowerCase().includes(query)) {
      return true;
    }
    
    // 搜索子分类名称
    if (website.subCategoryName && website.subCategoryName.toLowerCase().includes(query)) {
      return true;
    }
    
    return false;
  });
});

// 全局搜索结果按分类分组
const groupedGlobalSearchResults = computed(() => {
  // 注意：这里不再检查 searchScope.value !== 'global'，确保只要输入了搜索词就能看到结果
  if (!searchQuery.value) {
    return [];
  }
  
  const groups: {[key: string]: {category: string, websites: (Website & { categoryId?: string; categoryName?: string; subCategoryId?: string; subCategoryName?: string; })[]}} = {};
  
  globalSearchResults.value.forEach(website => {
    const categoryName = website.categoryName || '未分类';
    if (!groups[categoryName]) {
      groups[categoryName] = {
        category: categoryName,
        websites: []
      };
    }
    groups[categoryName].websites.push(website);
  });
  
  return Object.values(groups);
});

// 根据选中的子分类和标签过滤网站
const filteredWebsites = computed(() => {
  let websites: Website[] = [];
  
  // 如果没有子分类，使用主分类的网站
  if (!props.category.subCategories || props.category.subCategories.length === 0) {
    websites = [...props.category.websites];
  } 
  // 如果选择了特定的子分类
  else if (activeSubCategory.value !== 'all') {
    const subCategory = props.category.subCategories.find(sc => sc.id === activeSubCategory.value);
    if (subCategory) {
      websites = [...subCategory.websites];
    }
  } 
  // 如果选择了"全部"子分类
  else {
    // 合并所有子分类的网站
    props.category.subCategories.forEach(subCategory => {
      websites = websites.concat(subCategory.websites);
    });
  }
  
  // 根据标签过滤网站
  if (activeTag.value !== 'all') {
    websites = websites.filter(website => 
      website.tags && website.tags.includes(activeTag.value)
    );
  }
  
  // 根据搜索关键词过滤网站（当前分类范围内）
  if (searchQuery.value && searchScope.value === 'current') {
    const query = searchQuery.value.toLowerCase();
    websites = websites.filter(website => {
      // 搜索网站标题
      if (website.title.toLowerCase().includes(query)) {
        return true;
      }
      
      // 搜索网站URL
      if (website.url.toLowerCase().includes(query)) {
        return true;
      }
      
      // 搜索网站描述
      if (website.description && website.description.toLowerCase().includes(query)) {
        return true;
      }
      
      // 搜索网站标签
      if (website.tags && website.tags.some(tag => tag.toLowerCase().includes(query))) {
        return true;
      }
      
      return false;
    });
  }
  
  return websites;
});

const openWebsite = (url: string) => {
  window.open(url, '_blank');
};

// 处理图片加载错误的情况
const handleImageError = (event: Event) => {
  const target = event.target as HTMLImageElement;
  // 使用一个默认的base64图标，或者简单地隐藏图标
  target.style.display = 'none';
};

// 切换子分类
const setActiveSubCategory = (id: string) => {
  activeSubCategory.value = id;
};

// 切换标签
const setActiveTag = (tag: string) => {
  activeTag.value = tag;
};

// 清空搜索
const clearSearch = () => {
  searchQuery.value = '';
};

// 切换搜索范围
const toggleSearchScope = () => {
  searchScope.value = searchScope.value === 'global' ? 'current' : 'global';
};

// 执行搜索（设置为全局搜索）
const performSearch = () => {
  if (searchQuery.value) {
    searchScope.value = 'global';
  }
};

// 显式切换到全局搜索
const switchToGlobalSearch = () => {
  searchScope.value = 'global';
  // 确保搜索结果更新
  if (searchQuery.value) {
    // 触发重新计算
    globalSearchResults.value;
  }
};

// 显式切换到当前分类搜索
const switchToCurrentSearch = () => {
  searchScope.value = 'current';
};

// 显示右键菜单
const showContextMenu = (event: MouseEvent, website: Website) => {
  event.preventDefault();
  contextMenu.value = {
    visible: true,
    x: event.clientX,
    y: event.clientY,
    website: website
  };
};

// 隐藏右键菜单
const hideContextMenu = () => {
  contextMenu.value.visible = false;
};

// 计算属性：根据选中的主分类获取子分类（用于编辑表单）
const editAvailableSubCategories = computed(() => {
  if (!editForm.value.categoryId || !navigationData) return [];
  const category = navigationData.categories.find(c => c.id === editForm.value.categoryId);
  return category?.subCategories || [];
});

// 打开编辑对话框
const openEditModal = () => {
  if (contextMenu.value.website) {
    const website = contextMenu.value.website;
    
    // 查找网站当前所在的分类和子分类
    let categoryId = props.category.id;
    let subCategoryName = '';
    
    // 检查是否在主分类中
    const isInMainCategory = props.category.websites.some(w => w.id === website.id);
    
    if (!isInMainCategory && props.category.subCategories) {
      // 查找在哪个子分类中
      for (const subCategory of props.category.subCategories) {
        if (subCategory.websites.some(w => w.id === website.id)) {
          subCategoryName = subCategory.name;
          break;
        }
      }
    }
    
    editForm.value = {
      id: website.id,
      title: website.title,
      url: website.url,
      icon: website.icon,
      description: website.description || '',
      tags: website.tags ? [...website.tags] : [],
      categoryId: categoryId, // 使用当前分类
      subCategoryName: subCategoryName // 使用找到的子分类名称
    };
    
    editModal.value = {
      visible: true,
      website: website
    };
  }
  hideContextMenu();
};

// 保存编辑
const saveEdit = () => {
  if (editModal.value.website) {
    const updatedWebsite: Website = {
      id: editForm.value.id,
      title: editForm.value.title,
      url: editForm.value.url,
      icon: editForm.value.icon,
      description: editForm.value.description,
      tags: [...editForm.value.tags]
    };
    
    emit('update-website', updatedWebsite, editForm.value.categoryId, editForm.value.subCategoryName);
    closeEditModal();
  }
};

// 关闭编辑对话框
const closeEditModal = () => {
  editModal.value = {
    visible: false,
    website: null
  };
};
 

// 删除网站
const deleteWebsite = () => {
  if (contextMenu.value.website) {
    if (confirm(`确定要删除 "${contextMenu.value.website.title}" 吗？`)) {
      emit('delete-website', contextMenu.value.website.id);
    }
  }
  hideContextMenu();
};

// 添加标签
const addTag = () => {
  const newTag = prompt('请输入新标签:');
  if (newTag && newTag.trim() !== '' && !editForm.value.tags.includes(newTag.trim())) {
    editForm.value.tags.push(newTag.trim());
  }
};

// 删除标签
const removeTag = (index: number) => {
  editForm.value.tags.splice(index, 1);
};

// 点击其他地方隐藏菜单
document.addEventListener('click', (e) => {
  if (contextMenu.value.visible) {
    const contextMenuElement = document.querySelector('.context-menu');
    if (contextMenuElement && !contextMenuElement.contains(e.target as Node)) {
      hideContextMenu();
    }
  }
});



// 添加对话框相关状态
const addModal = ref({
  visible: false
});

// 添加表单数据
const addForm = ref({
  id: '',
  title: '',
  url: '',
  icon: '',
  description: '',
  tags: [] as string[],
  categoryId: '', // 添加分类ID字段
  subCategoryName: '' // 添加子分类名称字段
});

// 打开添加对话框
const openAddModal = () => {
  // 初始化表单数据
  addForm.value = {
    id: Date.now().toString(), // 使用时间戳作为默认ID
    title: '',
    url: '',
    icon: '',
    description: '',
    tags: [],
    categoryId: props.category.id, // 默认选择当前分类
    subCategoryName: '' // 子分类名称默认为空
  };
  
  // 如果当前分类有子分类，默认选择第一个
  if (props.category.subCategories && props.category.subCategories.length > 0) {
    addForm.value.subCategoryName = props.category.subCategories[0].name;
  }
  
  addModal.value = {
    visible: true
  };
};

// 关闭添加对话框
const closeAddModal = () => {
  addModal.value = {
    visible: false
  };
};

// 保存添加
const saveAdd = () => {
  const newWebsite: Website = {
    id: addForm.value.id,
    title: addForm.value.title,
    url: addForm.value.url,
    icon: addForm.value.icon,
    description: addForm.value.description,
    tags: [...addForm.value.tags]
  };
  
  emit('add-website', newWebsite, addForm.value.categoryId, addForm.value.subCategoryName);
  closeAddModal();
};

// 添加标签（添加表单）
const addTagToAddForm = () => {
  const newTag = prompt('请输入新标签:');
  if (newTag && newTag.trim() !== '' && !addForm.value.tags.includes(newTag.trim())) {
    addForm.value.tags.push(newTag.trim());
  }
};

// 删除标签（添加表单）
const removeTagFromAddForm = (index: number) => {
  addForm.value.tags.splice(index, 1);
};
</script>

<template>
  <div class="content-area">
     <div class="content-header">
      <h1>{{ category.name }}</h1>
      <div class="header-actions">
        <button @click="triggerImport" class="action-btn">导入数据</button>
        <button @click="triggerExport" class="action-btn">导出数据</button>
        <button @click="openAddModal" class="action-btn">添加网站</button>
      </div>
    </div>
    
    <!-- 搜索框 -->
    <div class="search-container">
      <div class="search-box-wrapper">
        <div class="search-input-container">
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索网站标题、URL、描述或标签..."
            class="search-input"
            @keyup.enter="performSearch"
          />
          <button 
            v-if="searchQuery" 
            class="clear-btn" 
            @click="clearSearch"
          >
            ✕
          </button>
        </div>
        <button class="search-btn" @click="performSearch">搜索</button>
        <button class="search-scope-btn" :class="{ active: searchScope === 'global' }" @click="switchToGlobalSearch">全局搜索</button>
        <button class="search-scope-btn" :class="{ active: searchScope === 'current' }" @click="switchToCurrentSearch">当前分类</button>
      </div>
    </div>
    
    <!-- 子分类导航 -->
    <div v-if="category.subCategories && category.subCategories.length > 0 && searchScope !== 'global'" class="sub-categories">
      <button 
        class="sub-category-btn" 
        :class="{ active: activeSubCategory === 'all' }"
        @click="setActiveSubCategory('all')"
      >
        全部
      </button>
      <button 
        v-for="subCategory in category.subCategories" 
        :key="subCategory.id"
        class="sub-category-btn"
        :class="{ active: activeSubCategory === subCategory.id }"
        @click="setActiveSubCategory(subCategory.id)"
      >
        {{ subCategory.name }}
      </button>
    </div>
    
    <!-- 标签导航 -->
    <div v-if="allTags.length > 0 && searchScope !== 'global'" class="tags-filter">
      <button 
        class="tag-btn" 
        :class="{ active: activeTag === 'all' }"
        @click="setActiveTag('all')"
      >
        全部标签
      </button>
      <button 
        v-for="tag in allTags" 
        :key="tag"
        class="tag-btn"
        :class="{ active: activeTag === tag }"
        @click="setActiveTag(tag)"
      >
        {{ tag }}
      </button>
    </div>
    
    <!-- 全局搜索结果显示 -->
    <div v-if="searchQuery" class="global-search-results">
      <div 
        v-for="group in groupedGlobalSearchResults" 
        :key="group.category"
        class="search-result-group"
      >
        <h3 class="result-group-title">{{ group.category }}</h3>
        <div class="websites-grid">
          <div 
            v-for="website in group.websites" 
            :key="website.id"
            class="website-card"
            @click="openWebsite(website.url)"
            @contextmenu="showContextMenu($event, website)"
          >
            <img 
              :src="website.icon" 
              :alt="website.title" 
              class="website-icon"
              @error="handleImageError"
            />
            <div class="website-info">
              <h3 class="website-title">{{ website.title }}</h3>
              <p v-if="website.description" class="website-description">{{ website.description }}</p>
              <!-- 显示网站标签 -->
              <div v-if="website.tags && website.tags.length > 0" class="website-tags">
                <span 
                  v-for="tag in website.tags" 
                  :key="tag" 
                  class="tag"
                >
                  {{ tag }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 没有搜索结果 -->
      <div v-if="groupedGlobalSearchResults.length === 0 && searchScope === 'global'" class="no-results">
        <p>没有找到匹配的网站</p>
      </div>
    </div>
    
    <!-- 当前分类搜索结果 -->
    <div v-else>
      <div class="websites-grid">
        <div 
          v-for="website in filteredWebsites" 
          :key="website.id"
          class="website-card"
          @click="openWebsite(website.url)"
          @contextmenu="showContextMenu($event, website)"
        >
          <img 
            :src="website.icon" 
            :alt="website.title" 
            class="website-icon"
            @error="handleImageError"
          />
          <div class="website-info">
            <h3 class="website-title">{{ website.title }}</h3>
            <p v-if="website.description" class="website-description">{{ website.description }}</p>
            <!-- 显示网站标签 -->
            <div v-if="website.tags && website.tags.length > 0" class="website-tags">
              <span 
                v-for="tag in website.tags" 
                :key="tag" 
                class="tag"
              >
                {{ tag }}
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 搜索结果为空时显示 -->
      <div v-if="filteredWebsites.length === 0 && searchQuery && searchScope === 'current'" class="no-results">
        <p>没有找到匹配的网站</p>
      </div>
    </div>
    
    <!-- 右键菜单 -->
    <div 
      v-if="contextMenu.visible" 
      class="context-menu" 
      :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
    >
      <div class="context-menu-item" @click="openEditModal">编辑</div>
      <div class="context-menu-item" @click="deleteWebsite">删除</div>
    </div>
    
     <!-- 添加对话框 -->
    <div v-if="addModal.visible" class="modal-overlay" @click="closeAddModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>添加网站</h3>
          <button class="modal-close" @click="closeAddModal">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveAdd">
            <div class="form-group">
              <label for="add-title">网站名称:</label>
              <input 
                id="add-title" 
                v-model="addForm.title" 
                type="text" 
                required 
                class="form-control"
              />
            </div>
            
            <div class="form-group">
              <label for="add-url">网站链接:</label>
              <input 
                id="add-url" 
                v-model="addForm.url" 
                type="url" 
                required 
                class="form-control"
              />
            </div>
            
            <div class="form-group">
              <label for="add-category">网站导航分类:</label>
              <select 
                id="add-category" 
                v-model="addForm.categoryId" 
                class="form-control"
                required
              >
                <option 
                  v-for="category in availableCategories" 
                  :key="category.id" 
                  :value="category.id"
                >
                  {{ category.name }}
                </option>
              </select>
            </div>
            
            <div class="form-group">
              <label for="add-subcategory">子分类 (可选，如果不存在将自动创建):</label>
              <input 
                id="add-subcategory" 
                v-model="addForm.subCategoryName" 
                type="text" 
                class="form-control"
                placeholder="输入子分类名称，留空则添加到主分类"
              />
            </div>
            
            <div class="form-group">
              <label for="add-icon">图标链接:</label>
              <input 
                id="add-icon" 
                v-model="addForm.icon" 
                type="url" 
                class="form-control"
              />
            </div>
            
            <div class="form-group">
              <label for="add-description">网站描述:</label>
              <textarea 
                id="add-description" 
                v-model="addForm.description" 
                class="form-control"
              ></textarea>
            </div>
            
            <div class="form-group">
              <label>标签:</label>
              <div class="tags-editor">
                <div class="tags-list">
                  <span 
                    v-for="(tag, index) in addForm.tags" 
                    :key="index"
                    class="tag-edit"
                  >
                    {{ tag }}
                    <button type="button" @click="removeTagFromAddForm(index)" class="remove-tag">×</button>
                  </span>
                </div>
                <button type="button" @click="addTagToAddForm" class="add-tag-btn">+ 添加标签</button>
              </div>
            </div>
            
            <div class="form-actions">
              <button type="button" @click="closeAddModal" class="btn-cancel">取消</button>
              <button type="submit" class="btn-save">添加</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <!-- 编辑对话框 -->
    <div v-if="editModal.visible" class="modal-overlay" @click="closeEditModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>编辑网站</h3>
          <button class="modal-close" @click="closeEditModal">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveEdit">
            <div class="form-group">
              <label for="edit-title">网站名称:</label>
              <input 
                id="edit-title" 
                v-model="editForm.title" 
                type="text" 
                required 
                class="form-control"
              />
            </div>
            
            <div class="form-group">
              <label for="edit-url">网站链接:</label>
              <input 
                id="edit-url" 
                v-model="editForm.url" 
                type="url" 
                required 
                class="form-control"
              />
            </div>
            
            <div class="form-group">
              <label for="edit-category">网站导航分类:</label>
              <select 
                id="edit-category" 
                v-model="editForm.categoryId" 
                class="form-control"
                required
              >
                <option 
                  v-for="category in availableCategories" 
                  :key="category.id" 
                  :value="category.id"
                >
                  {{ category.name }}
                </option>
              </select>
            </div>
            
            <div class="form-group">
              <label for="edit-subcategory">子分类 (可选，如果不存在将自动创建):</label>
              <input 
                id="edit-subcategory" 
                v-model="editForm.subCategoryName" 
                type="text" 
                class="form-control"
                placeholder="输入子分类名称，留空则添加到主分类"
              />
            </div>
            
            <div class="form-group">
              <label for="edit-icon">图标链接:</label>
              <input 
                id="edit-icon" 
                v-model="editForm.icon" 
                type="url" 
                class="form-control"
              />
            </div>
            
            <div class="form-group">
              <label for="edit-description">网站描述:</label>
              <textarea 
                id="edit-description" 
                v-model="editForm.description" 
                class="form-control"
              ></textarea>
            </div>
            
            <div class="form-group">
              <label>标签:</label>
              <div class="tags-editor">
                <div class="tags-list">
                  <span 
                    v-for="(tag, index) in editForm.tags" 
                    :key="index"
                    class="tag-edit"
                  >
                    {{ tag }}
                    <button type="button" @click="removeTag(index)" class="remove-tag">×</button>
                  </span>
                </div>
                <button type="button" @click="addTag" class="add-tag-btn">+ 添加标签</button>
              </div>
            </div>
            
            <div class="form-actions">
              <button type="button" @click="closeEditModal" class="btn-cancel">取消</button>
              <button type="submit" class="btn-save">保存</button>
            </div>
          </form>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped>
.content-area {
  flex: 1;
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
  position: relative;
}
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.action-btn:hover {
  background-color: #2980b9;
}

.content-header h1 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.search-container {
  margin-bottom: 20px;
}

.search-box-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
}

.search-input-container {
  position: relative;
  flex: 1;
  max-width: 500px;
}

.search-input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 24px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.search-input:focus {
  border-color: #3498db;
}

.clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #999;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.clear-btn:hover {
  background-color: #eee;
}

.search-btn {
  padding: 12px 24px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.search-btn:hover {
  background-color: #2980b9;
}

.search-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.search-scope-btn {
  padding: 8px 16px;
  background-color: #eee;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  white-space: nowrap;
}

.search-scope-btn:hover,
.search-scope-btn.active {
  background-color: #3498db;
  color: white;
}

.sub-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.sub-category-btn {
  padding: 8px 16px;
  background-color: #e0e0e0;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.sub-category-btn:hover,
.sub-category-btn.active {
  background-color: #3498db;
  color: white;
}

.tags-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.tag-btn {
  padding: 6px 12px;
  background-color: #eee;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
}

.tag-btn:hover,
.tag-btn.active {
  background-color: #9b59b6;
  color: white;
}

.result-group-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 20px 0 15px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.websites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.website-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.website-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.website-icon {
  width: 48px;
  height: 48px;
  margin-right: 16px;
  border-radius: 4px;
}

.website-info {
  flex: 1;
}

.website-title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.website-description {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.website-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  background-color: #ecf0f1;
  color: #7f8c8d;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.no-results {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

/* 右键菜单样式 */
.context-menu {
  position: fixed;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  min-width: 120px;
}

.context-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.context-menu-item:hover {
  background-color: #f5f5f5;
}

/* 编辑对话框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

.form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: #3498db;
}

textarea.form-control {
  min-height: 80px;
  resize: vertical;
}

.tags-editor {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.tag-edit {
  background-color: #ecf0f1;
  color: #7f8c8d;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.remove-tag {
  background: none;
  border: none;
  color: #e74c3c;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.remove-tag:hover {
  background-color: #e74c3c;
  color: white;
}

.add-tag-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn-cancel {
  padding: 10px 20px;
  background-color: #95a5a6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-save {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-save:hover {
  background-color: #2980b9;
}

@media (max-width: 768px) {
  .content-area {
    padding: 16px;
  }
  
  .search-box-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input-container {
    max-width: none;
  }
  
  .search-btn {
    align-self: flex-start;
  }
  
  .websites-grid {
    grid-template-columns: 1fr;
  }
  
  .sub-categories,
  .tags-filter {
    gap: 6px;
  }
  
  .sub-category-btn {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  .search-options {
    justify-content: flex-start;
  }
}
</style>